<template>
  <transition name="fade">
    <div :class="classes" v-if="fullscreenVisible">
      <div :class="mainClasses">
        <span :class="dotClasses"></span>
        <div :class="textClasses"><slot></slot></div>
      </div>
    </div>
  </transition>
</template>
<script>
  import { oneOf } from '../../util/tools';
  import ScrollbarMixins from '../MsgBox/mixins-scrollbar';

  const prefixCls = 'h-spin';

  export default {
    name: 'Spin',
    mixins: [ ScrollbarMixins ],
    props: {
      size: {
        validator (value) {
          return oneOf(value, ['small', 'large']);
        }
      },
      fix: {
        type: Boolean,
        default: false
      },
      fullscreen: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        showText: false,
        visible: false
      };
    },
    computed: {
      classes () {
        return [
          `${prefixCls}`,
          {
            [`${prefixCls}-${this.size}`]: !!this.size,
            [`${prefixCls}-fix`]: this.fix,
            [`${prefixCls}-show-text`]: this.showText,
            [`${prefixCls}-fullscreen`]: this.fullscreen,
          }
        ];
      },
      mainClasses () {
        return `${prefixCls}-main`;
      },
      dotClasses () {
        return `${prefixCls}-dot`;
      },
      textClasses () {
        return `${prefixCls}-text`;
      },
      fullscreenVisible () {
        if (this.fullscreen) {
          return this.visible;
        } else {
          return true;
        }
      },
    },
    watch: {
      visible (val) {
        if (val) {
            this.addScrollEffect();
        } else {
            this.removeScrollEffect();
        }
      }
    },
    mounted () {
      this.showText = this.$slots.default !== undefined;
    }
  };
</script>
